<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content=""/>
    <meta name="robots" content="all"/>
    <title>mBlog</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/blog.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/modules/layui-icon-extend/iconfont.css}">
    <style type="text/css">
        .icons {
            margin-top: 10px;
            text-align: center;
            flex-direction: row;
            align-items: center;
        }

        .icon {
            text-align: center;
            display: inline-block;
            margin-right: 15px;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">M_secret</a>
            <nav class="nav" id="nav">
                <ul>
                    <li><a th:href="@{/}">博客</a></li>
                    <li><a th:href="@{/categories}">分类</a></li>
                    <li><a th:href="@{/tags}">标签</a></li>
                    <li><a th:href="@{/archive}">归档</a></li>
                    <li><a th:href="@{/me}">我</a></li>
                </ul>
            </nav>
            <a th:href="@{/admin/index}" target="_blank" class="blog-user" style="font-size: 20px">
                m&nbsp&nbsp&nbsp
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content">
            <div class="inner">

                <div th:if="${articles.size()} == 0">
                    <article class="article-list bloglist" align="center">
                        <section class="article-item zoomIn article" align="center">
                            <div class="content" style="background-size:contain;">
                                <img style="position: center; width:70%;height:auto;"
                                     th:src="@{/image/nothing.jpg}"/>
                            </div>
                        </section>
                    </article>
                </div>

                <article class="article-list bloglist" id="LAY_bloglist">
                    <section class="article-item zoomIn article" th:each="article:${articles}">
                        <!--<div class="fc-flag">置</div>-->
                        <h5 class="title">
                            <span class="fc-blue">&nbsp;&nbsp;</span>
                            <a th:href="@{/blog/__${article.articleId}__}">[[${article.articleTitle}]]</a>
                        </h5>

                        <div class="time">
                            <span class="day">[[${#dates.day(article.publishTime)}]]</span>
                            <span class="month fs-18">[[${#dates.month(article.publishTime)}]]<span
                                    class="fs-14">月</span></span>
                            <span class="year fs-18 ml10">[[${#dates.year(article.publishTime)}]]</span>
                        </div>
                        <div class="content">
                            <!--<a href="article.html" class="cover img-light">
                                <img src="image/cover/2019121192339714.png">
                            </a>-->
                            <div style="font-size: 16px; padding: 10px 8px;line-height: 2em;color: #565a5f;">
                                <!--[[${#strings.length(article.outline) > 300} ?
                                ${#strings.substring(article.outline,0,300)}:-->
                                [[${article.outline}]]
                            </div>

                        </div>
                        <div class="read-more">
                            <a th:href="@{/blog/__${article.articleId}__}" class="fc-grey f-fwb">阅读全文</a>


                        </div>
                        <aside class="f-oh footer">
                            <div class="f-fl tags" style="margin-left: 1%;float:left;">
                                <span class="iconfont icon-wenjian" style="font-size: 12px"></span>
                                <a class="tag" target="_blank" style="font-size: 12px"
                                   th:href="@{/categories(category=${article.cName})}">[[${article.cName}]]</a>
                            </div>
                            <div class="f-fl tags" style="float: left" th:unless="${tag} == null"
                                 th:each="tag:${article.tags}">
                                <span>&nbsp;</span>
                                <span class="fa fa-tags fs-16" style="font-size: 12px"></span>
                                <a class="tag" target="_blank" th:href="@{/tags(tag=${tag.tagName})}" style="font-size: 12px">[[${tag.tagName}]]</a>
                            </div>
                            <!--<div class="f-fr">
									<span class="read">
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>
                                <span class="ml20">
										<i class="fa fa-comments fs-16"></i>
										<a href="javascript:void(0)" class="num fc-grey">1</a>
									</span>
                            </div>-->
                        </aside>
                    </section>
                </article>
            </div>
        </div>

        <div class="col-other">
            <div class="other-item" id="categoryandsearch">
                <div class="other-item">
                    <div class="search-wrap">
                        <!--<h5 class="other-item-title">我</h5>-->
                        <div class="inner">
                            <div>
                                <table>
                                    <tr>
                                        <td rowspan="2"><a th:href="@{/me}">
                                            <img class="layui-nav-img" alt=""
                                                style="width: 60px; height: 60px;margin-left: 15px  "
                                                th:src="@{/image/photo.jpg}"/></a></td>
                                        <td><h4><a th:href="@{/me}">M_secret</a></h4></td>
                                    </tr>

                                    <tr>
                                        <td><h5><a th:href="@{/me}">路漫漫其修远兮，吾将上下而求索</a></h5></td>
                                    </tr>
                                </table>
                            </div>
                            <div style="height: 10px"></div>


                            <div class="icons" style="width: auto;height: 40px;">
                                <div class="icon">
                                    <a href="https://github.com/m-secret" target="_blank">
                                        　　<i class="iconfont icon-github"></i>
                                    </a>
                                    <a href="https://gitee.com/Zhu_Xinyu" target="_blank">
                                        　　<i class="iconfont icon-gitee"></i>
                                    </a>
                                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2576107424@qq.com"
                                       title="2576107424@qq.com" target="_blank">
                                        　　<i class="iconfont icon-qq"></i>
                                    </a>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <p style="opacity:1"></p>
                <div class="search">
                    <label class="search-wrap">
                        <input type="text" id="searchArticleByKeyword" placeholder="输入关键字搜索"/>
                        <span class="search-icon">
					                <i class="fa fa-search"></i>
					            </span>
                    </label>
                    <ul class="search-result"></ul>
                </div>
                <ul class="category mt20" id="category">
                    <li data-index="0" id="sliderPosition" class="slider"
                        th:style="'top:'+ (${categoryPosition})*40 +'px'"></li>
                    <!--填充Tags-->
                    <li data-index="1"><a th:href="@{/}">全部分类</a></li>

                    <li th:each="category,categoryStat : ${categories}"
                        th:data-index="${categoryStat.index+2}">
                        <!--th:style="${tagId == tag.tagId}? 'background-color : #e8e9e7;margin-left:6px;margin-right:6px;' : 'margin-left:6px;margin-right:6px;' "-->
                        <a th:href="@{/categories(category=${category.CName})}">[[${category.cName}]]</a>
                    </li>
                </ul>
            </div>
            <!--右边悬浮 平板或手机设备显示-->
            <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
            <div class="article-category">
                <div class="article-category-title">分类导航</div>
                <!--按Tags分类-->
                <a th:each="category,categoryStat : ${categories}"
                   th:href="@{/categories(category=${category.CName})}">[[${category.cName}]]</a>

                <div class="f-cb"></div>
            </div>
            <!--遮罩-->
            <!--<div class="blog-mask animated layui-hide"></div>
            <div class="other-item">
                <h5 class="other-item-title">推荐</h5>
                <div class="inner">
                    <ul class="hot-list-article">
                        <li><a href="/Blog/Read/16">.NET Spire.Doc组件</a></li>
                        <li><a href="/Blog/Read/14">MUI框架-快速开发APP</a></li>
                        <li><a href="/Blog/Read/9">2018最新版QQ音乐api调用</a></li>
                    </ul>
                </div>
            </div>-->
        </div>
    </div>

</div>
<footer class="grid-footer" style="text-align: center">
    <div style="width: auto;height: 40px;">
        <div>
            <a href="https://github.com/m-secret" target="_blank">
                　　<i class="iconfont icon-github"></i>
            </a>
            <a href="https://gitee.com/Zhu_Xinyu" target="_blank">
                　　<i class="iconfont icon-gitee"></i>
            </a>
            <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2576107424@qq.com"
               title="2576107424@qq.com" target="_blank">
                　　<i class="iconfont icon-qq"></i>
            </a>

        </div>
    </div>
    <p class="mt05">
        Copyright &copy; 2019 M_secret All Rights Reserved
    </p>
</footer>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<script>NProgress.start();</script>
<script th:src="@{/js/yss/article.js}"></script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>

</body>
</html>
